<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
  <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <div class="row g-3">
    <div class="col-lg-3">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between">
            <div class="me-1">
              <h6 class="mb-2 bsa-ellipsis-1 ">今日收入</h6>
              <h4 class="mb-1 bsa-ellipsis-1">13,145.20</h4>
            </div>
            <i class="bi bi-currency-yen fs-1 text-danger"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between">
            <div class="me-1">
              <h6 class="mb-2 bsa-ellipsis-1">用户总数</h6>
              <h4 class="mb-1 bsa-ellipsis-1">1546</h4>
            </div>
            <i class="bi bi-people fs-1 text-info"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between">
            <div class="me-1">
              <h6 class="mb-2 bsa-ellipsis-1">订单总数</h6>
              <h4 class="mb-1 bsa-ellipsis-1">2000</h4>
            </div>
            <i class="bi bi-cart fs-1 text-primary"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between">
            <div class="me-1">
              <h6 class="mb-2 bsa-ellipsis-1">留言</h6>
              <h4 class="mb-1 bsa-ellipsis-1">1000</h4>
            </div>
            <i class="bi bi-chat fs-1 text-success"></i>
          </div>
        </div>
      </div>
    </div>

    <!--开源信息-->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          图书管理系统2.0
        </div>
        <div class="card-body">
          <!-- <canvas id="chart-bar"></canvas> -->
          <!-- 轮播 -->
          <div id="demo" class="carousel slide" data-bs-ride="carousel">
    
            <!-- 指示符 -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
            </div>

            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../dist/img/123.png" class="d-block"
                        style="width:100%; height:200px ;">
                </div>
                <div class="carousel-item">
                    <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block"
                        style="width:100%; height:200px ;">
                </div>
                <div class="carousel-item">
                    <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block"
                        style="width:100%; height:200px ;">
                </div>
            </div>

            <!-- 左右切换按钮 -->
            <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
        </div>
      </div>
    </div>


    <div class="col-lg-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          近七天pv值
        </div>
        <div class="card-body">
          <canvas id="chart-bar"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          年营业额走势
        </div>
        <div class="card-body">
          <canvas id="chart-line"></canvas>
        </div>
      </div>
    </div>

    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          媒体数据
        </div>
        <div class="card-body">
          <canvas id="chart3"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          房源租赁概况
        </div>
        <div class="card-body">
          <canvas id="chart4"></canvas>
        </div>
      </div>
    </div>

    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          订单摘要
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead>
              <tr>
                <th>订单号</th>
                <th>商品</th>
                <th>下单人</th>
                <th>下单日期</th>
                <th>价格</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              <tr>
                <td>#157444499</td>
                <td>
                  Apple iPhone 13 (A2634) 512GB
                </td>
                <td>欲饮琵琶码上催</td>
                <td>2022/7/16</td>
                <td>￥100.00</td>
                <td>
                  <span class="badge bg-success">交易成功</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <a href="javascript:" class="btn btn-sm btn-light"><i
                      class="bi bi-gear"></i></a>
                    <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                      class="bi bi-arrow-down"></i></a>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/chart.js/dist/chart.umd.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>

  $(function () {
    new Chart(document.getElementById('chart-bar').getContext('2d'), {
      type: 'bar',
      data: {
        labels: ['2022/7/11', '2022/7/12', '2022/7/13', '2022/7/14', '2022/7/15', '2022/7/16'],
        datasets: [{
          label: 'pv值',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)'
          ],
          borderColor: [
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)',
            'rgba(52,143,80, 0.6)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    new Chart(document.getElementById('chart-line').getContext('2d'), {
      type: 'line',
      data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
        datasets: [{
          label: '营业额 单位/万元',
          data: [65, 90, 60, 50, 40, 30, 20],
          fill: false,
          borderColor: 'rgba(185,110,228,.5)',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    new Chart(document.getElementById('chart3').getContext('2d'), {
      type: 'line',
      data: {
        labels: ['2022.8.3', '2022.8.4', '2022.8.5', '2022.8.6', '2022.8.7', '2022.8.9'],
        datasets: [
          {
            label: '粉丝',
            data: [65, 90, 60, 50, 40, 30, 120],
            fill: false,
            borderColor: 'rgba(252, 92, 125,.5)',
            tension: 0.1,
            cubicInterpolationMode: 'monotone',

          },
          {
            label: '被收藏',
            data: [30, 80, 70, 48, 64, 101, 10],
            fill: false,
            borderColor: 'rgba(10, 191, 188,.5)',
            tension: 0.1,
            cubicInterpolationMode: 'monotone',
          },
          {
            label: '获赞',
            data: [10, 37, 54, 68, 73, 98, 110],
            fill: false,
            borderColor: 'rgba(221, 100, 0,.5)',
            tension: 0.1,
            cubicInterpolationMode: 'monotone',
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    new Chart(document.getElementById('chart4').getContext('2d'), {
      type: 'doughnut',
      data: {
        labels: [
          '已租',
          '未租'
        ],
        datasets: [{
          label: 'Dataset 1',
          data: [300, 50],
          backgroundColor: [
            '#0abfbc',
            '#348f50'
          ],
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '已租未租房源占比图'
          }
        }
      }
    });

    //图表响应式处理
    window.onresize = function () {
      for (let id in Chart.instances) {
        Chart.instances[id].resize();
      }
    };
  })


</script>
</body>
</html>
